<!DOCTYPE html>

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css">
    <title>高德地图Demo</title>
</head>
<style>
    html, body, #container {
        height: 100%;
        width: 100%;
    }

    .amap-icon img {
        width: 20px;
        height: 29px;
    }

    .btn {
        width: 6rem;
        margin: 0 1rem 0 4.5rem;
    }
</style>

<body>
<div id="container"></div>
<div class="input-card" style='width: 18rem;'>
    <div class="input-item">
        <label><input type="radio" name='func' value='rule'><span class="input-text">距离测量</span></label>
        <label><input type="radio" name='func' value='measureArea'><span class="input-text">面积测量</span></label>
    </div>
    <div class="input-item">
        <input id="close" type="button" class="btn" value="关闭"/>
    </div>
</div>


<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.14&key=d39d7c6e358a5ab68859f9b7050c4712&plugin=AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MouseTool"></script>
<script type="text/javascript">

    // 蓝色中心点
    var CENTER_BLUE = [113.323803, 23.134805]

    // 红色人群
    var PEOPLE_RED = "113.327827334,23.134173539668|113.32868853198,23.134174377966|113.32913672194,23.133766765726|"
















    var myMap = {
        map: null,
        mouseTool: Object,
        infoWindow: Object,
        mapLoad: function () {
            this.map = new AMap.Map("container", {
                resizeEnable: true,
                doubleClickZoom: false,
                center: CENTER_BLUE,
                zoom: 15
            });
            var scale = new AMap.Scale({
                visible: false
            });
            var toolBar = new AMap.ToolBar({
                visible: false
            });

            this.map.addControl(toolBar);
            this.map.addControl(scale);
            toolBar.show();
            scale.show();
            this.mouseTool = new AMap.MouseTool(this.map);

            var centerPoint = new AMap.LngLat(CENTER_BLUE[0], CENTER_BLUE[1])
            this.addMarker(centerPoint, "center")
            this.addPeople()
        },
        addMarker: function (point, type) {
            var icon = "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png"
            if (type == "center") {
                icon = "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"
            }

            var marker = new AMap.Marker({
                icon: icon,
                position: point
//            offset: new AMap.Pixel(-13, -30)
            });
            this.map.add(marker);


            marker.on('mouseover', function (e) {
                myMap.openInfo(e.lnglat, type)
            })

            marker.on('mouseout', function () {
                myMap.infoWindow.close();
            })
        },
        openInfo: function (point, type) {
            //构建信息窗体中显示的内容
            var title = "人群";
            if (type == "center") {
                title = "基站";
            }
            this.infoWindow = new AMap.InfoWindow({
                content: myMap.getMsgContent(point, title)
            });
            this.infoWindow.open(this.map, point);
        },
        addPeople: function () {
            var myArray = new Array();
            var pepleArray = PEOPLE_RED.split("|")
            for (var i = 0; i < pepleArray.length; i++) {
                if (pepleArray[i]) {
                    var lonLat = pepleArray[i].split(",")
                    myArray.push(new AMap.LngLat(lonLat[0], lonLat[1]));
                }
            }

            for (var i = 0; i < myArray.length; i++) {
                var p = myArray[i];
                this.addMarker(p);
            }

        },
        getMsgContent: function (point, title) {
            return '<div>' +
                    '<img style=\"float:left;\" src=\" https://webapi.amap.com/images/autonavi.png \"/><br>' +
                    '<b>' + title + '</b><br>' +
                    '<div style="margin:0;line-height:1;font-size:13px">' +
                    '坐标：' + point.lng + ',' + point.lat +
                    '</div>' +
                    '</div>';
        },
        draw: function (type) {
            switch (type) {
                case 'rule': {
                    this.mouseTool.rule({
                        startMarkerOptions: {//可缺省
                            icon: new AMap.Icon({
                                size: new AMap.Size(19, 31),//图标大小
                                imageSize: new AMap.Size(19, 31),
                                image: "https://webapi.amap.com/theme/v1.3/markers/b/start.png"
                            })
                        },
                        endMarkerOptions: {//可缺省
                            icon: new AMap.Icon({
                                size: new AMap.Size(19, 31),//图标大小
                                imageSize: new AMap.Size(19, 31),
                                image: "https://webapi.amap.com/theme/v1.3/markers/b/end.png"
                            }),
                            offset: new AMap.Pixel(-9, -31)
                        },
                        midMarkerOptions: {//可缺省
                            icon: new AMap.Icon({
                                size: new AMap.Size(19, 31),//图标大小
                                imageSize: new AMap.Size(19, 31),
                                image: "https://webapi.amap.com/theme/v1.3/markers/b/mid.png"
                            }),
                            offset: new AMap.Pixel(-9, -31)
                        },
                        lineOptions: {//可缺省
                            strokeStyle: "solid",
                            strokeColor: "blue",
                            strokeOpacity: 1,
                            strokeWeight: 2
                        }
                        //同 RangingTool 的 自定义 设置，缺省为默认样式
                    });
                    break;
                }
                case 'measureArea': {
                    this.mouseTool.measureArea({
                        strokeColor: 'blue',
                        fillColor: 'blue',
                        fillOpacity: 0.2
                        //同 Polygon 的 Option 设置
                    });
                    break;
                }
            }
        }

    }

    var radios = document.getElementsByName('func');
    for (var i = 0; i < radios.length; i += 1) {
        radios[i].onchange = function (e) {
            myMap.draw(e.target.value)
        }
    }

    document.getElementById('close').onclick = function () {
        //关闭，并清除覆盖物
        myMap.mouseTool.close(true)
        for (var i = 0; i < radios.length; i += 1) {
            radios[i].checked = false;
        }
    }

    myMap.mapLoad()

</script>
</body>
</html>
